<template>
    <el-row class="flex items-stretch">
        <el-col :span="21" class="flex flex-wrap content-center">
            <component-page-loading :status="dictionaryStatus" v-if="['loading', 'error'].indexOf(dictionaryStatus) >= 0" @reload="getDictionary"></component-page-loading>
            <component-page-loading status="nodata" v-else-if="dictionary.id == null"></component-page-loading>
            <div class="nub-list" v-else>
                <div class="nub-item h-auto m-0">
                    <div class="nub-text break-all" v-html="dictionary.content"></div>
                </div>
            </div>
        </el-col>
        <el-col :span="3" class="text-right" v-if="dictionaryStatus == 'dle'">
            <el-button type="text" @click="dialogVisible = true">{{ $t('action.select') }}</el-button>
        </el-col>
        <el-dialog :title="$t('game.other.dictionary.dialog.selection')" width="800px" :visible.sync="dialogVisible" append-to-body>
            <div v-loading="loading">
                <div class="pb-4">
                    <div v-if="dictionaryCache.id == null">
                        <component-page-loading status="nodata"></component-page-loading>
                    </div>
                    <div class="nub-list" v-else>
                        <div class="nub-item h-auto m-0">
                            <div class="nub-text" v-html="dictionaryCache.content"></div>
                            <div class="nub-close" @click="tagCheckedDelete">
                                <i class="el-icon-close"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pb-4">
                    <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                        <div class="medium mr-2">
                            <el-select :placeholder="$t('game.other.dictionary.classify')" v-model="filterOption.classify" clearable @change="filterChange">
                                <el-option v-for="(item, index) in $t('game.other.dictionary.classifyList')" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="medium mr-2">
                            <el-select :placeholder="$t('game.setting.language.name')" v-model="filterOption.language" clearable @change="filterChange">
                                <el-option v-for="(item, index) in $t('game.setting.language.languages')" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="flex-auto">
                            <el-input :placeholder="$t('game.other.dictionary.content')" v-model="filterOption.keyword" clearable @change="filterChange">
                                <el-button slot="append" icon="el-icon-search" @click="filterChange"></el-button>
                            </el-input>
                        </div>
                    </el-form>
                </div>
                <el-table style="width: 100%" ref="multipleTable"
                          :data="dataList" @row-click="handleRowClick">
                    <el-table-column min-width="100" :label="$t('game.other.dictionary.classify')" prop="classify">
                        <template slot-scope="scope">
                            <el-radio v-model="dictionaryCache.id" :label="scope.row.id">
                                {{ $t(`game.other.dictionary.classifyList.${scope.row.classify}.label`) }}
                            </el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="100" :label="$t('game.setting.language.name')" prop="language">
                        <template slot-scope="scope">
                            {{ $t(`game.setting.language.languages.${scope.row.language}.label`) }}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="300" :label="$t('game.other.dictionary.content')" prop="content">
                        <template slot-scope="scope">
                            <span v-html="$options.filters.hsFilterKeyword(scope.row.content, filterOption.keyword)"></span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pt-2 text-right" v-if="dataMeta.total">
                    <el-pagination background layout="prev, pager, next"
                                   :current-page="filterOption.page"
                                   :page-size="filterOption.page_size"
                                   :total="dataMeta.total"
                                   @current-change="filterPageChange">
                    </el-pagination>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('action.cancel') }}</el-button>
                <el-button type="primary" @click="onSubmit">{{ $t('action.confirm') }}</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
export default {
    name: "PageSelectionDictionary",
    model: {
        prop: 'id',
        event: 'change'
    },
    props: {
        id: {
            type: Number,
            default: null
        },
    },
    data() {
        return {
            dictionaryStatus: 'dle',
            dictionary: {},
            dictionaryCache: {},
            dialogVisible: false,
            loading: false,
            filterOption: {
                keyword: '',
                page: 1,
                page_size: 5,
            },
            dataMeta: {
                total: 0,
            },
            dataList: []
        }
    },
    watch: {
        id: {
            immediate: true,
            handler(n, o) {
                // 获取已选字典
                this.getDictionary();
            }
        },
        dialogVisible: function (n, o) {
            if (n) {
                // 初始化选中数据
                this.dictionaryCache = _.cloneDeep(this.dictionary);
                // 初始化数据列表
                this.filterChange();
            } else {
                // 初始化表格参数
                this.clearFilterOption();
            }
        }
    },
    methods: {
        // 获取已选字典
        getDictionary() {
            if (this.id == this.dictionary.id) {
                return
            }
            if (!this.id) {
                this.dictionary = {};
                return
            }
            this.dictionaryStatus = 'loading';
            axios.get('/common/getDictionary', {
                params: {
                    id: this.id
                }
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dictionary = response.data.resp_data;
                    this.dictionaryStatus = 'dle';
                } else {
                    this.dictionaryStatus = 'error';
                }
            })
        },
        clearFilterOption() {
            this.filterOption.keyword = '';
            this.filterOption.page = 1;
            this.dataMeta.total = 0;
            this.dataList = [];
        },
        filterChange() {
            this.filterOption.page = 1;
            this.getDataList();
        },
        filterPageChange(page) {
            this.filterOption.page = page;
            this.getDataList();
        },
        getDataList() {
            this.loading = true;
            axios.get('/common/getDictionaryList', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                    // 初始化选中表格
                    this.$nextTick(function () {
                        // 取消选中表格
                        this.$refs.multipleTable.setCurrentRow();
                        // 初始化表格选中
                        for (let i in this.dataList) {
                            if (this.dictionaryCache.id == this.dataList[i].id) {
                                this.$refs.multipleTable.setCurrentRow(this.dataList[i]);
                                break;
                            }
                        }
                    });
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.search')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        onSubmit() {
            // 关闭模态框
            this.dialogVisible = false;
            // 同步数据
            this.dictionary = _.cloneDeep(this.dictionaryCache);
            // 对外广播事件
            this.$emit('change', this.dictionary.id);
        },
        // 标签删除已选字典
        tagCheckedDelete() {
            this.dictionaryCache = {};
            // 取消选中表格
            this.$refs.multipleTable.setCurrentRow();
        },
        // 表格选择点击字典
        handleRowClick(row) {
            this.dictionaryCache = _.cloneDeep(row);
        },
    }
}
</script>

<style lang="scss" scoped>
.nub-list .nub-item {
    margin-top: 3px;
    margin-right: 6px;
    margin-bottom: 3px;
}

::v-deep .el-dialog__body {
    min-height: 560px;
    padding-top: 12px;
    padding-bottom: 15px;
}
</style>
